<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="include :: header"></head>
<style>

    .layui-upload-colse {
        position: relative;
    }

    .closeUpload {
        position: absolute;
        top: 0;
        right: 0;
        width: 20px;
        height: 20px;
        cursor: pointer;
    }

    .upImg {
        width: 80px;
        height: 80px;
    }

    .formfixed {
        position: relative;
    }

    .remove {
        position: absolute;
        top: 125%;
        right: -175px;
        transform: translateY(-50%);
        cursor: pointer;
    }

    .myheader {
        height: 140px;
        background-color: #FFFFFF;
        padding: 20px 0;
        display: flex;
        align-items: center;
        margin: 0;
        flex-wrap: wrap;
    }

    .layui-tab {

        overflow: auto;
        background-color: #FFFFFF;
        margin: 10px 0 0 0;
    }

    .layui-input-block1 {
        display: flex;
        align-items: center;
        justify-content: flex-start
    }

    .layui-tab-title {
        height: 40px !important;
    }

    .layui-tab-content {
        height: calc(100% - 40px);
        overflow: auto;
    }

    .myremove1 {
        width: 70px;
        height: 33px;
        display: flex;
        align-items: center;
    }


    .mybutton {
        background: #fff;
        height: 150px;
        width: 150px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #a9b7b7;
        border: 2px solid #a9b7b7;
        margin-right: 10px;
        padding: 10px;
    }

    .mybutton:hover {
        cursor: pointer;
    }

    .layui-upload-list {
        display: flex;
        flex-wrap: wrap;
    }
</style>
<body>
<input id="inputType" th:value="${type}" style="display: none">
<input id="userId" th:value="${id}" style="display: none">
<input id="tableName" th:value="${tableName}" style="display: none">
<div class="layui-fluid mt2" style="background-color: #f0f2f5">
    <form class="layui-form" style="height: calc(100% - 17px);">

        <div class="layui-form-item" id="LayuiItems" style="height: calc(100% - 50px);margin: 0;    overflow: auto;">
            <!--                        循环-->
            <div class="layui-form-item" style="display: flex;" th:each="item,voStatus:${voList}">
                <div class="layui-inline"  style="width: calc((100% - 30px) / 3);">
                    <label class="layui-form-label" th:text="${type=='addZ'||type=='editZ'?'章节名称':'子节名称'}"></label>
                    <div class="layui-input-block">
                        <input class="form-control "
                               name="chapterName" myid="one" th:value="${type=='editZ'?(item?.chapterName):(item?.chapterName)}"
                               type="text" placeholder="请输入名称">
                    </div>
                </div>
                <div class="layui-inline"  style="width: calc((100% - 30px) / 3);">
                    <label class="layui-form-label">视频链接</label>
                    <div class="layui-input-block">
                        <input class="form-control "
                                myid="two" th:value="${item.videoUrl}"
                               type="text" placeholder="请输入视频链接">
                    </div>
                </div>
                <div class="layui-inline"  style="width: calc((100% - 30px) / 3);">
                    <label class="layui-form-label">优先级</label>
                    <div class="layui-input-block">
                        <input class="form-control "
                                myid="three" th:value="${item.sort}"
                               type="text" placeholder="请输入优先级" onkeyup="value=value.replace(/\D/g,'')">
                        <input th:value="${item?.id}" myid="four" style="display: none">
                    </div>
                </div>
                <button class="layui-inline layui-btn myremove1"
                        th:if="${type!='addJ'}"
                        th:style="${type!='addZ'||voStatus.index==0?'visibility: hidden':''}"
                        onclick="myRemoveLayui(this)"
                        type="button">删除
                </button>
                <div class="layui-inline" th:if="${type=='addJ'}"  style="display: flex;  justify-content: center; align-items: center;">
                    <button type="button" class="layui-btn" onclick="addLayuiItems()">添加</button>
                </div>
            </div>
        </div>

        <div style="    height: 50px;">

            <div class="layui-form-item  layui-flow-more">
                <div class="layui-inline">
                    <button type="button" class="layui-btn" lay-submit lay-filter="submit"
                            th:text="${type=='add'?'立即提交':'确定'}">立即提交
                    </button>
                </div>
            </div>

        </div>

    </form>
</div>

<div th:include="include::footer"></div>
<script type="text/javascript" src="/js/xmSelect.js"></script>
<script type="text/javascript" src="/js/webJs/jzweb/jazCourses/addInfo.js"></script>
</body>
</html>